<template>
  <div class="user-container">
    <user-search-form v-on:update:search="searchChangeHandler"/>
    <div class="user-content">
      <div class="button-box clearfix">
        <el-button type="primary" icon="el-icon-plus" @click="goToAddUser"> {{ $t('user.addUser') }} </el-button>
      </div>
      <user-table :table-data="tableData" :total="total" :listLoading="isListLoading" v-on:update:search="searchChangeHandler"></user-table>
    </div>
  </div>
</template>

<script>
  import { default as userTable } from "./userTable/index";
  import { default as userSearchForm } from "./userSearchForm/index";

  export default {
    name: "UserManagement",
    components: {
      userTable,
      userSearchForm
    },
    data() {
      return {
        tableData: [{
          admin_id: '1',
          tel: '15916871987',
          name: '用户A',
          is_del: 0,
          login_ip: '127.0.0.1',
          status: 0,
          supper: 1,
          created_at: '2018-09-01 12:00:00',
          updated_at: '2018-09-30 12:00:00',
          roles: [{
              role_id: '1',
              name: '超级管理员'
          }]
        }, {
          admin_id: '2',
          tel: '15916170802',
          name: '用户B',
          is_del: 1,
          login_ip: '127.0.0.1',
          status: 0,
          supper: 1,
          created_at: '2018-09-02 12:00:00',
          updated_at: '2018-10-01 12:00:00',
          roles: [{
              role_id: '1',
              name: '角色1'
          }, {
              role_id: '2',
              name: '角色2'
          }]
        }],
        total: 0,
        // 搜索条件
        searchCondition: {
          page: 1,
          limit: 10
        },
        // 用户列表是否加载中的标志位
        isListLoading: false
      }
    },
    methods: {
      searchChangeHandler: function(search) {
        // search 是子组件传来的值
        // console.log("searchChangeHandler, search = ", search);
        this.searchCondition = Object.assign(this.searchCondition, search);
        // console.log("searchCondition = ", this.searchCondition);

        this.getUserList()
      },
      // 根据条件查询用户列表
      getUserList: function() {
        this.isListLoading = true;
        this.$store
          .dispatch('getUserList', this.searchCondition)
          .then(data => {
            this.isListLoading = false;
            if (data['code'] === 0) {
              this.tableData = data['data']['data'];
              this.total = data["data"]["total"] || 0;
            }
          })
          .catch((error) => {
            console.error('get user list has error:', error)
            this.isListLoading = false;
        });
      },
      /** 跳转到添加用户 */
      goToAddUser() {
        this.$router.push({ path: 'addUser' })
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .user {
    &-container {
      margin: 30px;
    }
    &-content {
      max-width: 90%;
      margin: 10px auto;
      border-top: 1px solid #ccc;
      padding-top: 10px;
      .button-box {
        button {
          float: right;
        }
      }
    }
}
</style>
